import React, {Component} from 'react'
import { Input, DatePicker, Button, Select, Modal, Form } from 'antd'
const Search =　Input.Search
const Option = Select.Option
const FormItem = Form.Item

// 学员中一行搜素和按钮的组件
class CourseChoice extends Component {
  constructor() {
    super()
    this.state = {
      startValue: null,
      endValue: null,
      endOpen: false,
      modal2Visible: false,
    }
    this.disabledStartDate = this.disabledStartDate.bind(this)
    this.disabledEndDate = this.disabledEndDate.bind(this)
    this.onChange = this.onChange.bind(this)
    this.onStartChange = this.onStartChange.bind(this)
    this.onEndChange = this.onEndChange.bind(this)
    this.handleStartOpenChange = this.handleStartOpenChange.bind(this)
    this.handleEndOpenChange = this.handleEndOpenChange.bind(this)
    this.directorChange = this.directorChange.bind(this)
    this.needChange = this.needChange.bind(this)
    this.newCourse = this.newCourse.bind(this)
  }
  disabledStartDate(startValue) {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }

  disabledEndDate(endValue) {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  }

  onChange(field, value) {
    this.setState({
      [field]: value,
    });
  }

  onStartChange(value) {
    this.onChange('startValue', value);
  }

  onEndChange(value) {
    this.onChange('endValue', value);
  }

  handleStartOpenChange(open) {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange(open) {
    this.setState({ endOpen: open });
  }

  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }

  directorChange(value) {
    console.log(`selected ${value}`);
  }

  needChange(value) {
    console.log(`selected ${value}`);
  }

  render() {
    const children = []
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>)
    }
    const { getFieldDecorator } = this.props.form
    const {startValue, endValue, endOpen, inputVisible, inputValue, tags, needTags, needValue, needVisible  } = this.state
    return (
        <div className="rt-intent-choice cl">
          <div className="lf">
            <Search className="rt-intent-seach lf" placeholder="输入关键字" onSearch={(value) => {console.log(value)}} />
            <DatePicker
              className="lf"
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM-DD"
              value={startValue}
              placeholder="开始日期YY-MM-DD"
              onChange={this.onStartChange}
              onOpenChange={this.handleStartOpenChange}
            />
            <span className="rt-date">至</span>
            <DatePicker
              disabledDate={this.disabledEndDate}
              showTime
              format="YYYY-MM-DD"
              value={endValue}
              placeholder="结束日期YY-MM-DD"
              onChange={this.onEndChange}
              open={endOpen}
              onOpenChange={this.handleEndOpenChange}
            />
            <Button className="rt-btn-search">搜索</Button>
          </div>
          <div className="rf">
            <Button
              className="rt-btn-orange lf"
              icon="addfile"
              onClick={
                () => {
                  this.setState({
                    modal2Visible: true,
                  })
                }
              }
            >
              新建课程
            </Button>
            <Button className="rt-btn-greenBlue lf">课程导入</Button>
            <Select
              className="rt-intent-sel lf"
              showSearch
              style={{ width: 86 }}
              placeholder="批量操作"
              optionFilterProp="children"
              filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              <Option value="add">增加</Option>
              <Option value="update">修改</Option>
              <Option value="del">删除</Option>
            </Select>
          </div>
          <Modal
            title="新建课程"
            wrapClassName="vertical-center-modal"
            okText="保存"
            cancelText="取消"
            visible={this.state.modal2Visible}
            onOk={this.newCourse}
            onCancel={() => this.setModal2Visible(false)}
          >
            <div className="cl ">
              <Button className="rt-btn-show rt-btn-bottom-active lf">课程详情</Button>
              <Button
                className="rt-btn-return rf"
                onClick={
                  () => {
                    this.setModal2Visible(false)
                  }
                }
              >
                返回列表
              </Button>
            </div>
            <div className="rt-stu-new">
              <Form inline className="rt-form-course rt-form-new">
                <FormItem
                  label="名称"
                >
                  {getFieldDecorator('name')(
                    <Input placeholder="请输入课程名称" />
                  )}
                </FormItem>
                <FormItem
                  label="需求标签"
                >
                {getFieldDecorator('need')(
                  <Select
                    tags
                    style={{ width: '100%' }}
                    className="rt-select-tag rt-demand-tag"
                    onChange={this.needChange}
                    tokenSeparators={[',']}
                  >
                    {children}
                  </Select>
                )}
                </FormItem>
                <FormItem
                  label="编号"
                >
                {getFieldDecorator('code')(
                  <Input />
                )}
                </FormItem>
                <FormItem
                  label="创建日期"
                >
                  {getFieldDecorator('newDate', {rules: [{type: 'object', required: true, message: '请选择日期！'}]})(
                    <DatePicker placeholder="请选择日期" />
                  )}
                </FormItem>
              </Form>
              <Form inline className="rt-form-level rt-course-director">
                <FormItem
                  label="负责人"
                >
                  {getFieldDecorator('director')(
                    <Select
                      tags
                      style={{ width: '100%' }}
                      className="rt-select-tag"
                      onChange={this.directorChange}
                      tokenSeparators={[',']}
                    >
                      {children}
                    </Select>
                  )}
                </FormItem>
              </Form>
            </div>
          </Modal>
        </div>
      )
  }
  newCourse() {
    const { form: { validateFields } } = this.props
    validateFields((err, fieldsValue) => {
      if (err) return
      const data = {
        ...fieldsValue,
        createdAt: fieldsValue['newDate'].format('YYYY-MM-DD HH:mm:ss'),
        manager: fieldsValue['director'] ? fieldsValue['director'].join(',') : '',
        demand: fieldsValue['need'] ? fieldsValue['need'].join(',') : '',
      }
    })
  }
}

export default Form.create()(CourseChoice)